<template>
  <master title="章节列表">

    <div class="custom-tree-container">
      <div class="block">
        <!-- <p>使用 scoped slot</p> -->
        <el-tree :data="datas" highlight-current="true" default-expand-all="true" show-checkbox node-key="id"
          :expand-on-click-node="false" :props="params" @node-click="handleNodeClick" @node-expand="openTreeNode"
          @node-collapse="closeTreeNode" ref="tree" @node-contextmenu="openTreeMenu">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" @click="() => append(node,data, prompt('请输入节点名称'))">
                新增
              </el-button>
              <el-button type="text" size="mini" @click="() => remove(node, data)">
                删除
              </el-button>
            </span>
          </span>
        </el-tree>


        <div v-show="showTreeMenu" class="treeMenu">
          <div @click="addOrg">
            <i class="el-icon-plus" style="color: #1e9fff"></i>
            增加子分组
          </div>
          <div @click="editOrg">
            <i class="el-icon-edit" style="color: #fcc465"></i>
            修改分组名称
          </div>
          <!-- <div @click="deleteOrg">
            <i class="el-icon-delete" style="color: red"></i>
            删除分组及子分组
          </div> -->
          <div @click="showVideo">
            <i class="el-icon-plus" style="color: #65fc9a"></i>
            课程讲解
          </div>
        </div>


      </div>
    </div>

    <!-- 视频弹窗 -->
    <el-dialog :visible.sync="showvideodialog" title="Ai讲解" width="50%" :close-on-click-modal="false"
      @close="stopVideo">
      <video ref="videoPlayer" width="100%" controls :src="videoSrc" @canplay="onVideoLoaded"
        @error="onVideoError"></video>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 课程资料 -->
    <el-dialog title="表格对话框" :visible.sync="showtabledialog" width="60%">
      <el-table :data="tableData" style="width: 100%" @cell-click="handleCellClick111">
        <el-table-column prop="vedio" label="日期" width="180"></el-table-column>
        <el-table-column prop="pdfs" label="姓名" width="180"></el-table-column>
        <el-table-column prop="importantss" label="地址"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </span>
    </el-dialog>



    <!-- 添加子分组对话框 -->
    <el-dialog title="添加子分组" :visible.sync="addOrgDialogVisible" width="30%">
      <el-input v-model="newOrgLabel" placeholder="子分组名称"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addOrgDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAddOrg">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="新增节点" :visible.sync="dialogVisible" width="30%">
      <el-input v-model="newLabel" placeholder="节点名称"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAppend">确定</el-button>
      </span>
    </el-dialog>

    <!-- 修改分组名称对话框 -->
    <el-dialog title="修改分组名称" :visible.sync="editOrgDialogVisible" width="30%">
      <el-input v-model="editOrgLabel" placeholder="新分组名称" :value="currentOrgLabel"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editOrgDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEditOrg">确定</el-button>
      </span>
    </el-dialog>



  </master>
</template>
<script type="text/javascript">
  (function (G) {
    G.vue({
      "usingComponents": {///引入组件
        "master": "/components/Master/Master"///母版组件
      },
      "enablePullDownRefresh": true
    }, {
      data: {
        /* 111111111111111111111111111 Ai视频资料数据 111111111111111111111111111111111 */
        showvideodialog: false, // 控制弹窗显示
        videoSrc: "../../images/video.mp4", // 视频路径

        showtabledialog: false,
        tableData: [{
          vedio: '视频名字1',
          pdfs: 'PDF1',
          importantss: '章节重点1'
        }, {
          vedio: '视频名字2',
          pdfs: 'PDF2',
          importantss: '章节重点2'
        }, {
          vedio: '视频名字3',
          pdfs: 'PDF3',
          importantss: '章节重点3'
        }, {
          vedio: '视频名字4',
          pdfs: 'PDF4',
          importantss: '章节重点4'
        }],

        /* 1111111111111111111111111111 原本的树节点定义数据 11111111111111111111111111111111 */
        //章节数据
        datas: [],
        params: {
          children: 'children',
          label: 'label',
        },
        id: 1000,
        dialogVisible: false, // 对话框是否显示

        /* 1111111111111111111111111111 覃泳淇定义的数据 11111111111111111111111111111111 */
        newLabel: '', // 新节点名称
        currentNode: null, // 当前操作的节点
        showTreeMenu: false,
        openTreeNode: '',
        closeTreeNode: '',
        contextNode: {},    //右键存放data的数据
        nodes: {},     //右键存放nodes的数据
        addOrgDialogVisible: false, // 添加子分组对话框是否显示
        newOrgLabel: '', // 新子分组名称
        editOrgDialogVisible: false, // 修改分组名称对话框是否显示
        editOrgLabel: '', // 修改后的分组名称输入框数据
        currentOrgLabel: '', // 当前分组名称

        /* 111111111111111111111111111 实现右边新增对话框显示 111111111111111111111111111111111 */
        // 还没开始改就来活了，先当一个bug暂存
        // noderight : {},
        // datatight : {}
      }
      ,
      methods: {
        /* 1111111111111111111111111111 覃泳淇定义的数据 11111111111111111111111111111111 */
        // 提示方法
        addOrg() {
          console.log('添加子分组', this.contextNode)
          this.addOrgDialogVisible = true;
        },
        editOrg() {
          console.log('修改分组名称', this.contextNode)
          this.currentOrgLabel = this.contextNode.label;
          this.editOrgDialogVisible = true;
        },
        deleteOrg() {
          this.$confirm('此操作将删除 [${this.contextNode.label}] 分组、下级子分组, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

            //清空列表
            // const parent1 = this.nodes.parent;
            // const children1 = parent1.data.children || parent1.data;
            // const index1 = children1.findIndex(d => d.id === data.id);
            // console.log('index1', index1);
            // console.log('children1', children1);
            // console.log('parent1', parent1);
            // children1.splice(index1, 1);
            //删除
            G.delete('{JAVAURL}/sp-chapter/deleteByid?id=' + this.contextNode.id)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        /* 1111111111111111111111111111 覃泳淇定义的数据 11111111111111111111111111111111 */

        /* 1111111111111111111111111111 右键课程讲解视频方法 11111111111111111111111111111111 */
        handleCellClick111(row, column, cell, event) {
          console.log('Clicked cell:', { row, column });
        },
        //显示视频
        showVideo() {
          // console.log("11111", 11111);
          // 直接展示视频
          // this.showvideodialog = true;
          this.showtabledialog = true;

        },
        // 关闭视频弹窗
        closeDialog() {
          this.showvideodialog = false;
          this.stopVideo(); // 确保关闭时停止视频

          this.showtabledialog = false;
        },
        // 停止视频播放
        stopVideo() {
          const video = this.$refs.videoPlayer;
          if (video) {
            video.pause(); // 暂停视频
            video.currentTime = 0; // 可选：重置到视频开头
          }
        },
        onVideoLoaded() {
          console.log("视频已加载");
        },
        onVideoError() {
          console.error("视频加载失败，请检查视频路径");
        },
        /* 1111111111111111111111111111 右键课程讲解视频数据 11111111111111111111111111111111 */

        /* 1111111111111111111111111111 覃泳淇定义的数据 11111111111111111111111111111111 */
        // 右键点击获取数据
        openTreeMenu(event, data, node, target) {
          console.log("event, data, node, target", event, data, node, target)
          this.showTreeMenu = true // 显示菜单
          this.contextNode = data // 存储数据
          this.nodes = node
          document
            .querySelector('.treeMenu')
            .setAttribute('style', `top:${event.clientY + 10}px;left:${event.clientX + 10}px;`)
          document.addEventListener('click', this.closeTreeMenu)
          document.addEventListener('contextmenu', this.closeTreeMenu)
        },
        closeTreeMenu() {
          this.showTreeMenu = false // 关闭菜单
          document.removeEventListener('click', this.closeTreeMenu)
          document.removeEventListener('contextmenu', this.closeTreeMenu)
        },
        /* 1111111111111111111111111111 覃泳淇定义的数据 11111111111111111111111111111111 */

        /* 1111111111111111111111111111 tree自带的方法 11111111111111111111111111111111 */
        // 实际方法
        // 1、右边添加
        append(node, data, label) {
          console.log("右边添加data", data);
          console.log("右边添加node", node);
          console.log("右边添加label", label);

          // this.noderight = node
          // this.datatight = data

          // data.id 是parent_i
          //1、新增对象的定义
          let editForm = {
            parentId: data.id,//已有的id
            name: label,//输入的名字
            type: node.level//层级
          }
          // console.log("editForm", editForm);
          // 2、新增
          G.post('{JAVAURL}/sp-chapter/chapterAdd', editForm).then(res => {
            if (!res.errorMsg) {
              // console.log("res", res);
              let nodeId = res.data.id

              //3、新增节点之前需要获取数据库里新添加的id作为节点的id
              //将数据库的id作为id添加
              if (label) {
                const newChild = { id: nodeId, label, children: [] };
                if (!data.children) {
                  this.$set(data, 'children', []);
                }
                data.children.push(newChild);
                // this.visible = true//控制表单显示
                G.toask('添加章节成功')
              }
            }
          })
        },
        // 2、右边删除
        remove(node, data) {
          // console.log("node", node);
          // console.log("data", data);

          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.id === data.id);
            // console.log("index", index);
            // console.log("children", children);
            // console.log("parent",parent);


            children.splice(index, 1);



            // console.log("data.id", data.id);
            G.delete('{JAVAURL}/sp-chapter/deleteByid?id=' + data.id)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        /* 1111111111111111111111111111 tree自带的方法 11111111111111111111111111111111 */




        /* 1111111111111111111111111111 覃泳淇定义的数据 11111111111111111111111111111111 */
        // 对话框方法
        confirmAppend() {
          if (this.newLabel.trim()) {
            this.append(this.currentNode, this.newLabel);
            this.dialogVisible = false; // 关闭对话框
          } else {
            this.$message.error('节点名称不能为空');
          }
        },

        // 右键打开对话框的实际增删改实现
        confirmAddOrg() {
          // trim() 是 JavaScript 字符串的内置方法，用于 移除字符串首尾的空格。
          if (this.newOrgLabel.trim()) {

            let addOrgForm = {
              // 根据实际需求填写正确的参数
              parentId: this.contextNode.id,   //v-model获取右键点击的值
              name: this.newOrgLabel,    //v-model获取输入的值
              type: this.nodes.level
            };
            // console.log("addOrgForm", addOrgForm);
            G.post('{JAVAURL}/sp-chapter/chapterAdd', addOrgForm).then(res => {
              if (!res.errorMsg) {
                // console.log("res", res);
                let nodeId = res.data.id

                //3、新增节点之前需要获取数据库里新添加的id作为节点的id
                //如果存在v-model获取输入的值
                if (this.newOrgLabel) {
                  const label = this.newOrgLabel;
                  const newChild = { id: nodeId, label, children: [] };
                  //如果右键点击的事件获取到了node，并且node存在子节点  
                  if (!this.contextNode.children) {
                    this.$set(this.contextNode, 'children', []);
                  }
                  this.contextNode.children.push(newChild);
                  // 表单隐藏
                  this.addOrgDialogVisible = false
                  G.toask('添加章节成功')
                }
              }
            })

          } else {
            this.$message.error('子分组名称不能为空');
          }
        },
        confirmEditOrg() {
          if (this.editOrgLabel.trim() && this.editOrgLabel !== this.currentOrgLabel) {
            // 构建修改分组名称的数据对象并调用接口
            let editOrgForm = {
              id: this.contextNode.id,
              name: this.editOrgLabel   //输入修改的名称
            };
            G.put('{JAVAURL}/sp-chapter/chapterUpdate', editOrgForm).then(res => {
              if (!res.errorMsg) {
                G.toask('修改分组名称成功');
                this.editOrgDialogVisible = false;
                // 更新界面显示的名称
                this.contextNode.label = this.editOrgLabel;
                // 刷新数据列表（如果需要）
                // this.getList();
              }
            });
          } else {
            this.$message.error('分组名称未修改或不能为空');
          }
        },
        /* 1111111111111111111111111111 覃泳淇定义的数据 11111111111111111111111111111111 */

        // tree自带的点击事件方法，用于刷新list，但是太慢了我没有定义
        handleNodeClick(data) {
          // console.log(data);
          // this.getList(data.id);
        },

        //获取数据列表
        getList() {
          G.get('{JAVAURL}/sp-practice/treeChapter', { courseId: '1313921323726012416' }).then((chapter) => {
            console.log("chapter.data", chapter.data)
            this.datas = chapter.data;

          });
        }
      },
      mounted() {
        this.getList();
      }
    });
  })(Y)
</script>
<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .treeMenu {
    font-size: 14px;
    position: fixed;
    padding: 2px 0px 5px;
    z-index: 99999;
    top: 50%;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #e6ebf5;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

    div {
      padding: 2px 10px;
      box-sizing: border-box;
      text-align: left;
    }

    div:hover {
      background-color: #eee;
      cursor: pointer;
    }
  }
</style>